<div class="content">
    <div id="example_title">
        <h1>Flat Sidebar</h1>
        Often it is useful to collapse sidebar into a single line. To do that set flatButton to true and on the flat event adjust sidebar container's width.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="sidebar" style="height: 370px; width: 200px; float: left"></div>
<div style="margin-left: 220px;">
    <button class="w2ui-btn" onclick="goFlat()">Go Flat</button>
</div>
<div style="clear: both"/>

<!--CODE-->
<script type="module">
import { w2sidebar, query, w2utils } from '__W2UI_PATH__'

let sidebar = new w2sidebar({
    box: '#sidebar',
    name : 'sidebar',
    nodes: [
        { id: 'level-1', text: 'General', icon: 'fa fa-flask', expanded: true,
            nodes: [
                { id: 'level-1-1', text: 'Home', icon: 'fa fa-home' },
                { id: 'level-1-2', text: 'Coffee', icon: 'fa fa-coffee', count: 5 },
                { id: 'level-1-3', text: 'Comment', icon: 'fa fa-comment-o' }
            ]
        },
        { id: 'level-2', text: 'Level 2', icon: 'fa fa-gear', expanded: true,
            nodes: [
                { id: 'level-2-1', text: 'Level 2.1', icon: 'fa fa-star-o' },
                { id: 'level-2-2', text: 'Level 2.2', icon: 'fa fa-star-o' },
                { id: 'level-2-3', text: 'More...', icon: 'fa fa-star-o',
                    nodes: [
                        { id: 'level-2-3-1', text: 'Level 2.3.1', icon: 'fa fa-star-o' },
                        { id: 'level-2-3-2', text: 'Level 2.3.2', icon: 'fa fa-star-o' },
                        { id: 'level-2-3-3', text: 'Level 2.3.3', icon: 'fa fa-star-o' }
                    ]
                }
            ]
        }
    ],
    onFlat(event) {
        query('#sidebar').css({
            width: (event.detail.goFlat ? '36px' : '200px'),
            // padding: (event.detail.goFlat ? '2px' : 0),
        })
    },
    onSelect(event) {
        if (event.detail.node) {
            w2utils.notify(`Selected "${event.detail.node.text}"`, { timeout: 500000 })
        }
    }
})

window.goFlat = function () {
    sidebar.goFlat()
}
</script>